<template>
  <view>
    <view class="tab-panel">
      <view class="tab-panel-item tab-active">
        <view href="javascript:;" class="aui-flex">
          <view class="aui-shop-img">
            <u--image
              :showLoading="true"
              :src="src"
              width="180rpx"
              height="216rpx"
              @click="click"
            ></u--image>
          </view>
          <view class="aui-flex-box">
            <h2>项目名称项目名称项目名称项目名称项目（加急）</h2>
            <span>
              <em>加急状态</em>
              <em>加急中</em>
            </span>
            <h3>项目地点：河北省秦皇岛市抚宁</h3>
            <p>项目类型：劳务需求</p>
          </view>
          <view class="aui-flex aui-flex-pic">
            <view class="aui-flex-box">
              <span><i class="icon icon-user"></i>0</span>
            </view>
            <view class="aui-list-right">
              <span><i class="icon icon-coin"></i>0</span>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const src = ref("../../static/logo.gif");
</script>

<style scoped lang="scss">
.aui-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 15px;
  position: relative;
}

.aui-flex-box {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: #333;
}

.icon {
  width: 20px;
  height: 20px;
  display: block;
  border: none;
  float: left;
  background-size: 20px;
  background-repeat: no-repeat;
}

.tab-panel .tab-panel-item.tab-active {
  position: relative;
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.tab-panel-item .aui-flex {
  background: #fff;
  margin-left: 12px;
  margin-top: 12px;
  margin-right: 12px;
  border-radius: 3px;
  box-shadow: 0 4px 2px #bfbfbf;
}
.aui-shop-img {
  width: 120px;
  height: 120px;
  margin-right: 1rem;
}
.aui-shop-img img {
  width: 120px;
  height: 120px;
  display: block;
  border: none;
}
.aui-flex-box h2 {
  font-size: 0.9rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #444444;
  margin-bottom: 0.5rem;
}
.aui-flex-box span em {
  font-style: normal;
  font-size: 0.6rem;
  background: #f1efef;
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
  color: #949494;
}
.aui-flex-box h3 {
  font-size: 0.6rem;
  color: #ee4b46;
  font-weight: normal;
  margin-top: 0.3rem;
}
.aui-flex-box p {
  font-size: 0.6rem;
  color: #9e9e9e;
  font-weight: normal;
  margin-top: 0.3rem;
}
.tab-panel-item .aui-flex-pic {
  padding: 10px 0 0 0;
  position: absolute;
  right: 0;
  bottom: 1px;
  box-shadow: none;
  background: none;
}
.aui-list-right {
  margin-left: 2rem;
}

.icon-user {
  background-image: url("");
  background-size: 15px;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  margin-right: 3px;
}
.icon-coin {
  margin-top: 3px;
  margin-right: 3px;
  background-size: 15px;
  width: 15px;
  height: 15px;
  background-image: url("");
}
</style>
